Ext.ns("Ext.jn.Win1");

Ext.jn.Win1 = Ext.extend(Ext.Window, {
			constructor : function(config) {
				config = Ext.apply({
					title : "ExtJs",
					layout : "fit",
					width : 600,
					height : 400,
					plain : true
						/**
						 * True表示为渲染window body的背景为透明的背景，这样看来window
						 * body与边框元素（framing elements）融为一体，
						 * false表示为加入浅色的背景，使得在视觉上body元素与外围边框清晰地分辨出来（默认为false）。
						 */
					}, config);
				Ext.jn.Win1.superclass.constructor.call(this, config);
			},
			initComponent : function() {
				var thisId = this.id;
				this.items = [this._createPanel()];
				Ext.jn.Win1.superclass.initComponent.call(this);
			},
			_createPanel : function() {
				var thisId = this.id;
				var sm = new Ext.grid.CheckboxSelectionModel({
					singleSelect : true //只允许单行选择,默认false.
				});
				var cm = new Ext.grid.ColumnModel([
						//new Ext.grid.RowNumberer()添加行号
						new Ext.grid.RowNumberer(),
						sm,
						{
							header : "编号",
							dataIndex : "id",
							width : 15,
							sortable : true //允许排队,默认false.
						},
						{
							header : "名字",
							dataIndex : "name",
							width : 20
						}, {
							header : "性别",
							dataIndex : "sex",
							renderer : function(value){
								return JnUtil.fontQqualColor(value,"m","男","女");
							},
							width : 15
						}, {
							header : "电话",
							dataIndex : "tile",
							width : 20,
							editor : new Ext.grid.GridEditor(new Ext.form.TextField())
						}, {
							header : "日期",
							dataIndex : "date",
							renderer : Ext.util.Format.dateRenderer("Y年m月d日 H:i:s"),
							width : 30
						}]);

				var data = [["1", "赵爱的", "4575424551","2011-04-05 15:11:52","m"],
						["2", "钱埃弗", "2245154155","2011-04-05 15:11:52","m"], ["3", "顺利啊", "2454215452","2011-04-05 15:11:52","m"],
						["4", "李安定", "9458755511","2011-04-05 15:11:52","f"], ["5", "周父类", "1875447881","2011-04-05 15:11:52","f"],
						["1", "赵爱的", "4575424551","2011-04-05 15:11:52","m"], ["5", "周父类", "1875447881","2011-04-05 15:11:52","m"],
						["1", "赵爱的", "4575424551","2011-04-05 15:11:52","f"], ["2", "钱埃弗", "2245154155","2011-04-05 15:11:52","f"],
						["3", "顺利啊", "2454215452","2011-04-05 15:11:52","m"], ["4", "李安定", "9458755511","2011-04-05 15:11:52","f"],
						["4", "李安定", "9458755511","2011-04-05 15:11:52","f"], ["5", "周父类", "1875447881","2011-04-05 15:11:52","f"],
						["1", "赵爱的", "4575424551","2011-04-05 15:11:52","m"], ["2", "钱埃弗", "2245154155","2011-04-05 15:11:52","m"],
						["3", "顺利啊", "2454215452","2011-04-05 15:11:52","f"], ["4", "李安定", "9458755511","2011-04-05 15:11:52","m"],
						["5", "周父类", "1875447881","2011-04-05 15:11:52","m"], ["6", "挣阿飞", "7845588412","2011-04-05 15:11:52","m"]];

				var store = new Ext.data.Store({
							id : thisId + "storeGrid",
							//autoLoad : true,
							//proxy : new Ext.data.MemoryProxy(data),
							proxy : new Ext.data.PagingMemoryProxy(data),
							reader : new Ext.data.ArrayReader({}, [{
												name : "id"
											},{
												name : "name"
											},{
												name : "tile"
											},{
												name : "date",
												type : "date" ,
												dateFormat : "Y-m-d H:i:s"
											},"sex"])
						});

				//var grid = new Ext.grid.GridPanel({
				var grid = new Ext.grid.EditorGridPanel({
							id : thisId + "grid",
							//width : 4000,
							//height : 2000,
							//autoHeight : true,
							//stripeRows : true,			//stripeRows斑马效果
							//enableColumnMove : false,		//enableColumnMove拖动效果
							//enableColumnResize : false, 	//enableColumnRessize改变列宽
							cm : cm,
							sm : sm,
							store : store,
							//viewConfig就是Ext.grid.GridView的参数.
							viewConfig : {
								forceFit : true				//将cm的width变为百分百而不是像素   
							},
							bbar : new Ext.PagingToolbar({
								pageSize : 5,
								store : store,
								displayInfo : true,
								displayMsg : '{0},{1},{2}'
							}),
							//autoExpandColumn :"id"		//制动撑满表格.只能是id,为了使用autoExpandColumn我们要把cm加上id
							clicksToEdit:1
						});
				store.load({params:{start:0,limit:5}});

				var panel = new Ext.Panel({
							layout : "border",
							items : [{
										region : 'north',
										height : 100,
										items : [new Ext.Button({
											id : thisId + "buttonQd",
											text : "删除"
										}),new Ext.Button({
											id : thisId + "buttonSx",
											text : "刷新"
										}),new Ext.Button({
											id : thisId + "buttonReload",
											text : "重载"
										})]
									}, {
										region : 'center',
										layout : 'fit',
										items : grid
									}]
						});

				return panel;
			}
		});

Ext.jn.Win1Action = Ext.extend(Ext.jn.Win1, {

			COMPONENTS : {},
			INIT_COMPONENTS : function() {
				var cmp = this.COMPONENTS;
				var thisId = this.id;
				cmp.buttonQd = Ext.getCmp(thisId + "buttonQd");
				cmp.buttonSx = Ext.getCmp(thisId + "buttonSx");
				cmp.buttonReload = Ext.getCmp(thisId + "buttonReload");
				cmp.grid = Ext.getCmp(thisId + "grid");
				cmp.storeGrid= Ext.StoreMgr.get(thisId + "storeGrid");
			},
			constructor : function(config) {
				// 执行父类构造方法
				Ext.jn.Win1Action.superclass.constructor.call(this, config);
				
				// 获取组件集合
				this.INIT_COMPONENTS();
				
				// 普通响应事件
				this.COMPONENTS.buttonQd.on("click",function(){
					var store = this.COMPONENTS.storeGrid;
					store.remove(store.getAt(1));
				},this);
				this.COMPONENTS.buttonSx.on("click",function(){
					alert(this.COMPONENTS.storeGrid.getTotalCount());
					//注意grid刷新和store重载是有区别的.
					this.COMPONENTS.grid.view.refresh();
				},this);
				this.COMPONENTS.buttonReload.on("click",function(){
					var store = this.COMPONENTS.storeGrid;
					//注意grid刷新和store重载是有区别的.
					store.load();
				},this);
			}
		});

Ext.onReady(function() {
	var _window = new Ext.jn.Win1Action();
	_window.show();
});
